<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <!-- <span>一般过程申请: {{ workflow.code }}</span> -->
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p-panel header="任务筛选" [toggleable]="true" >
                        
                            <div class="row" style="padding: 5px 0 10px 0">
                                <div class="input-group">
                                    <input [(ngModel)]="filterText" name="filterText" autoFocus
                                        class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                        type="text">
                                    <span class="input-group-btn" *ngIf="type==1">
                                        <button (click)="getModels()" class="btn btn-primary"><i
                                                class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                                    </span>
                                    <span class="input-group-btn" *ngIf="type==2">
                                        <button (click)="getMonths()" class="btn btn-primary"><i
                                                class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                                    </span>
                                </div>
                            </div>
                       
                        <div class="row" style="overflow: auto;">
                            <div class="align-items-center">

                                <div class="primeng-datatable-container">
                                    <p-table #taskdataTable [value]="primengTableHelper.records"
                                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                        [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                        [responsive]="primengTableHelper.isResponsive"
                                        [resizableColumns]="primengTableHelper.resizableColumns">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 130px">
                                                    操作</th>
                                                <th style="width: 100px" pSortableColumn="taskCode">
                                                    任务号
                                                    <p-sortIcon field="taskCode"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="statusName">
                                                    状态
                                                    <p-sortIcon field="statusName"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="drawingCode">
                                                    图号
                                                    <p-sortIcon field="drawingCode"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="amount">
                                                    数量
                                                    <p-sortIcon field="amount"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="dueDate">
                                                    完成时间
                                                    <p-sortIcon field="dueDate"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="dueDate">
                                                    是否接收
                                                    <p-sortIcon field="isReceived"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="dueDate">
                                                    接收时间
                                                    <p-sortIcon field="isReceived"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="routingLine">
                                                    路线
                                                    <p-sortIcon field="routingLine"></p-sortIcon>
                                                </th>
                                                <th style="width: 100px" pSortableColumn="remark">
                                                    任务备注
                                                    <p-sortIcon field="remark"></p-sortIcon>
                                                </th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record="$implicit">


                                            <tr>

                                                <td style="width: 130px">
                                                    <button (click)="joinTask(record)" class="btn btn-primary">
                                                        <i class="fa fa-cog"></i><span class="caret"></span>
                                                        加入
                                                    </button>
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 任务号</span>
                                                    {{ record.taskCode }}
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 状态</span>
                                                    <div *ngIf="record.isCompleted==false" style="position: relative; text-align: center; width: 60px;
                                                      border-radius: 2em;background-color: #f4516c; color: white;">
                                                        <span class="badge">未完成</span>
                                                    </div>
                                                    <div *ngIf="record.isCompleted==true" style="position: relative; text-align: center;width: 60px;
                                                      border-radius: 2em;background-color: #34bfa3;color: white;">
                                                        <span class="badge">已完成</span>
                                                    </div>
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 图号</span>

                                                    {{ record.drawingCode }}


                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 数量</span>

                                                    <div class="row" style="margin: 0;">
                                                        <div class="col-md-6" style="margin-top:10px;">
                                                            <i class="icon-layers"></i>
                                                            <span
                                                                class="caption-subject bold font-ml">{{ record.totalQuantity }}</span>
                                                        </div>
                                                        <div class="font-grey-cascade col-md-6 text-right">
                                                            <div class="caption-subject font-green">交付:
                                                                {{ record.completedQuantity }}</div>
                                                            <div class="font-grey-cascade">已投:
                                                                {{ record.producedQuantity }}</div>
                                                        </div>
                                                    </div>

                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 完成时间</span>
                                                    {{ record.completionTime | momentFormat: 'YYYY-MM-DD' }}
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 是否接收</span>
                                                    <div *ngIf="record.isReceived==false" style="position: relative; text-align: center; width: 60px;
                                                      border-radius: 2em;background-color: #f4516c; color: white;">
                                                        <span class="badge">未接收</span>
                                                    </div>
                                                    <div *ngIf="record.isReceived==true" style="position: relative; text-align: center;width: 60px;
                                                      border-radius: 2em;background-color: #34bfa3;color: white;">
                                                        <span class="badge">已接收</span>
                                                    </div>
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 接收时间</span>
                                                    {{ record.receptionTime | momentFormat: 'YYYY-MM-DD'}}
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 路线</span>
                                                    {{ record.routingLine }}
                                                </td>
                                                <td style="width: 100px">
                                                    <span class="ui-column-title"> 任务备注</span>
                                                    {{ record.remark }}
                                                </td>

                                            </tr>

                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                        {{'NoData' | localize}}
                                    </div>
                                    <div class="primeng-paging-container" *ngIf="type==1">
                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                            (onPageChange)="getModels($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                        </span>
                                    </div>
                                    <div class="primeng-paging-container" *ngIf="type==2">
                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                            (onPageChange)="getMonths($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                        </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </p-panel>


                    <p-panel header="批量投产任务" [toggleable]="true">
                        <div class="row" >
                            <!-- <label>管道模板
                                <span class="text-danger">*</span>
                            </label> -->
                          
                                <select #tmplCombobox class="form-control selectpicker" name="tmplName"
                                    data-style='btn-info' [ngClass]="{'edited': tmplName}" [(ngModel)]="tmplName"
                                    title="选择管道模板" style="background-color:#34bfa3;">
                                    <option value="">{{emptyText}}</option>
                                    <option *ngFor="let tmpl of tmpls" value="{{tmpl.name}}">{{tmpl.value.name}}
                                    </option>
                                </select>
                            
                           
                                <select #teamGroupCombobox name="teamGroup" class="form-control "
                                    [(ngModel)]="teamGroupName" [attr.data-live-search]="false" jq-plugin="selectpicker"
                                    title="选择主制班组" style="background-color:#34bfa3;">
                                    <option value="">{{emptyText1}}</option>
                                    <option *ngFor="let teamGroup of teamGroups" [value]="teamGroup.value">
                                        {{ teamGroup.displayText }}</option>
                                </select>
                            
                        </div>
                        <div class="row" style="padding: 5px 0 10px 0">
                            <div class="align-items-center">

                                <div class="primeng-datatable-container">
                        <p-table [value]="selected">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width:150px">任务号</th>
                                    <th style="width:150px"> 图号</th>
                                    <th style="width:150px">工艺路线</th>
                                    <th style="width:150px">数量</th>
                                    <th style="width:170px">完成时间</th>

                                    <th style="width:130px">备注</th>
                                    <th style="width:150px">操作</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData>
                                <tr>
                                    <td pEditableColumn style="width:200px">
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText type="text" [(ngModel)]="rowData.taskCode"
                                                    name="taskCode">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{rowData.taskCode}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText type="text" [(ngModel)]="rowData.drawingCode"
                                                    name="drawingCode">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{rowData.drawingCode}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText type="text" [(ngModel)]="rowData.routingLine"
                                                    name="routingLine">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{rowData.routingLine}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText type="number" [(ngModel)]="rowData.totalQuantity"
                                                    min="1" [ngClass]="{'edited': totalQuantity}" name="totalQuantity">
                                                <!-- <input class="form-control" name="amount" type="number" min="1" [ngClass]="{'edited': amount}" [(ngModel)]="amount" required> -->
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{rowData.totalQuantity}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn required>
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <p-calendar [(ngModel)]="rowData.completionTime" name="dueDate"
                                                    dateFormat="yy-mm-dd" [inputStyle]="{'width':'200px'}">
                                                </p-calendar>
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                <!-- {{rowData.receptionTime | momentFormat: 'YYYY-MM-DD' }} -->
                                                {{rowData.completionTime | momentFormat: 'YYYY-MM-DD'}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>

                                    <td pEditableColumn>
                                        <p-cellEditor>
                                            <ng-template pTemplate="input">
                                                <input pInputText type="text" [(ngModel)]="rowData.remark"
                                                    name="remark">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{rowData.remark}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td>

                                        <button pButton type="button" label="删除"
                                            class="ui-button-rounded ui-button-danger"
                                            (click)=" deletePipe(rowData)"></button>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        </div>
                        </div>
                        </div>
                    </p-panel>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
                        取消
                    </button>
                    <button type="submit" (click)="save()" class="btn btn-primary" [disabled]="!userForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i> <span>提交</span>
                    </button>
                </div>
            </form>
        </div>
    </div>


    <!-- <createordinaryform #createOrdinaryForm (modalSave)="getOutsourcing()"></createordinaryform> -->


</div>
